<template>
    <div>
            <el-table :data="recipelList" style="width: 100%" :border="true" height:250px>
                <el-table-column prop="head" label="医生头像" width="150">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.head" fits="fill" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="医生名称" />
                <el-table-column prop="department" label="科室" />
                <el-table-column prop="price" label="处方金额" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="mini" :icon="Document" text
                            @click="descBtn(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.size"
                    :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
            <el-config-provider :locale="locale">
                <el-table mb-1 :data="[]" />
            </el-config-provider>

        <!-- 详情框 -->
        <el-dialog v-model="dialogTableVisible" title="处方详情" width="80%">
            <el-table :data="infoData" height="500px">
                <el-table-column property="name" label="药品名称" />
                <el-table-column label="药品图片" >
                    <template #default="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.img" fits="fill" />
                    </template>
                </el-table-column>
                <el-table-column property="type" label="药品规格" />
                <el-table-column property="price" label="药品单价"/>
                <el-table-column property="count" label="药品数量"/>
                <el-table-column property="time" label="有效期"/>
                <el-table-column property="desc" label="用量备注" />
            </el-table>
            <div>总价：{{ price + 100 }}</div>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { reactive, watchEffect, ref } from 'vue';
import { Document } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const store = useStore()
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))


const small = ref(false)
const disabled = ref(false)
const background = ref(false)



const pageInfo = reactive({
    page: 1,
    size: 10
})
const recipelList = computed(() => {
    return store.state.ware.recipelList
})
const price = computed(() => {
    return store.state.ware.price
})
// const price = ref(0)

const total = computed(() => {
    return store.state.ware.recipelTotal
})

watchEffect(() => {
    store.dispatch('ware/A_recipelList', pageInfo)
})

// 分页器相关
const handleSizeChange = (val: number) => {
    pageInfo.size = val
}
const handleCurrentChange = (val: number) => {
    pageInfo.page = val
}

const dialogTableVisible = ref(false)
const infoData = [
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
  {
      name: '阿莫西林胶囊',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.PNQihMtP8dOCJYsS_9aREwHaHa?pid=ImgDet&rs=1',
      type: '8粒/盒',
      price: 12.61,
      count: 6,
      time: '2025-12-14',
      desc: '1日1次 1次1粒'
  },
]
// 详情
const receipelInfo = computed(() => {
    return store.state.ware.receipelInfo
})
const descBtn = (id) => {
    console.log(id);
    store.dispatch('ware/A_recipelInfo', { id })
    dialogTableVisible.value = true
    
}



</script>

<style scoped>
::v-deep .el-form-item__label {
    font-weight: bold;
}

::v-deep .el-table--border .el-table__cell {
    border-right: none;
}

::v-deep .el-button+.el-button {
    margin-left: -15px;
}

/* ::v-deep .el-table .el-table__cell {
    padding: 10px;
} */

/* ::v-deep[data-v-59e608a9] .el-table .el-table__cell{
    padding: 20px;
} */
::v-deep th {
    height: 80px;
}
</style>